//SPDX-FileCopyrightText: Copyright 2022-2024 深圳市同心圆网络有限公司
//SPDX-License-Identifier: GPL-3.0-only

import React, { useState } from "react";
import type { ViewInfo } from "@/api/project_dataview";
import { create_view, update_view } from "@/api/project_dataview";
import { observer } from 'mobx-react';
import { Form, Input, message, Modal, Popover, Select } from "antd";
import { useStores } from "@/hooks";
import { request } from "@/utils/request";
import { CirclePicker } from "react-color";

export interface EditProjectViewModalProps {
    viewInfo?: ViewInfo;
    onCancel: () => void;
    onOk: () => void;
}

const EditProjectViewModal = (props: EditProjectViewModalProps) => {
    const userStore = useStores('userStore');
    const projectStore = useStores('projectStore');

    const [title, setTitle] = useState(props.viewInfo?.title ?? "");
    const [bgColor, setBgColor] = useState(props.viewInfo?.bg_color ?? "#8bc34a");
    const [projectId, setProjectId] = useState(props.viewInfo?.project_id ?? "");

    const createView = async () => {
        await request(create_view({
            session_id: userStore.sessionId,
            project_id: projectId,
            title: title,
            bg_color: bgColor,
        }));
        message.info("增加成功");
        props.onOk();
    };

    const updateView = async () => {
        if (props.viewInfo == undefined) {
            return;
        }
        await request(update_view({
            session_id: userStore.sessionId,
            project_id: props.viewInfo.project_id,
            view_id: props.viewInfo.view_id,
            title: title,
            bg_color: bgColor,
        }));
        message.info("修改成功");
        props.onOk();
    };

    return (
        <Modal open title={`${props.viewInfo == undefined ? "增加" : "修改"}项目视图`} mask={false}
            okText={props.viewInfo == undefined ? "增加" : "修改"} okButtonProps={{ disabled: title == "" || projectId == "" }}
            onCancel={e => {
                e.stopPropagation();
                e.preventDefault();
                props.onCancel();
            }}
            onOk={e => {
                e.stopPropagation();
                e.preventDefault();
                if (props.viewInfo == undefined) {
                    createView();
                } else {
                    updateView();
                }
            }}>
            <Form labelCol={{ span: 3 }}>
                <Form.Item label="名称">
                    <Input value={title} onChange={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setTitle(e.target.value.trim());
                    }} />
                </Form.Item>
                <Form.Item label="背景色">
                    <Popover trigger="click" placement="bottom" content={
                        <CirclePicker
                            onChange={value => {
                                setBgColor(value.hex);
                            }} />
                    }>
                        <div style={{ backgroundColor: bgColor, width: "20px", height: "20px", cursor: "pointer" }} />
                    </Popover>
                </Form.Item>
                {props.viewInfo == undefined && (
                    <Form.Item label="项目">
                        <Select value={projectId} onChange={value => setProjectId(value)}>
                            {projectStore.projectList.filter(item=>item.closed == false).map(item => (
                                <Select.Option key={item.project_id} value={item.project_id}>{item.basic_info.project_name}</Select.Option>
                            ))}
                        </Select>
                    </Form.Item>
                )}
            </Form>
        </Modal>
    );
};

export default observer(EditProjectViewModal);